<template>
	<view class="apply-pages">
		<view class="info-block">
			<view class="title">购买方信息</view>
			<view class="info-item">
				<view class="name">发票抬头</view>
				<view class="info">{{info.name}}</view>
			</view>
			<view class="info-item">
				<view class="name">邮箱地址</view>
				<view class="info">{{info.email}}</view>
			</view>
		</view>
		<view class="info-block">
			<view class="title">销方信息</view>
			<view class="info-item grey">
				<view class="name">开票金额</view>
				<view class="info" style="font-weight: bold;">￥{{info.price}}</view>
			</view>
			<view class="info-item grey">
				<view class="name">开票主体</view>
				<view class="info">{{info.main}}</view>
			</view>
		</view>
		<view class="btn normal">提交申请</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					name: '王建国',
					email: '1759854544@qq.com',
					price: 1162.56,
					main: '⽢肃致卓新辉商贸有限责任公司⼀分公司'
				}
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.apply-pages {
		padding: 30rpx;

		.info-block {
			padding: 30rpx;
			border-radius: 20rpx;
			background-color: #fff;
			margin-bottom: 30rpx;

			.title {
				font-weight: bold;
				font-size: 32rpx;
			}

			.info-item:last-child {
				border-bottom: none;
			}

			.grey {
				color: #767676;
			}

			.info-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 100rpx;
				border-bottom: 1px solid #f7f7f7;
				font-size: 30rpx;

				.info {
					width: calc(100% - 200rpx);
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.btn {
			border-radius: 20rpx;
			height: 90rpx;
		}
	}
</style>